<template>
  <div class="exam-schedule">
    <div class="header">
      <h1>监考安排表</h1>
      <div class="actions">
        <button class="create-btn" @click="goToCreateBatch">创建批次</button>
      </div>
    </div>

    <div class="search-bar">
      <input
          v-model="searchKeyword"
          type="text"
          placeholder="请输入监考名称关键词查询"
          class="search-input"
      >
      <button class="search-btn" @click="search">查询</button>
      <button class="reset-btn" @click="resetSearch">重置</button>
    </div>

    <div class="table-container">
      <table class="schedule-table">
        <thead>
        <tr>
          <th>序号</th>
          <th>监考名称</th>
          <th>监考人数</th>
          <th>报名开始时间</th>
          <th>报名结束时间</th>
          <th>创建时间</th>
          <th>批次状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(batch, index) in filteredBatches" :key="batch.id">
          <td>{{ index + 1 }}</td>
          <td>{{ batch.name }}</td>
          <td>{{ batch.assigned }}/{{ batch.required }}</td>
          <td>{{ formatDateTime(batch.signupStart) }}</td>
          <td>{{ formatDateTime(batch.signupEnd) }}</td>
          <td>{{ formatDateTime(batch.createdAt) }}</td>
          <td>
            <span :class="statusClass(batch.status)">{{ batch.status }}</span>
          </td>
          <td>
            <button class="view-btn" @click="viewDetails(batch.id)">查看名单</button>
            <button class="download-btn" @click="downloadExamSheet(batch.id)">下载监考表</button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 搜索关键词
const searchKeyword = ref('');

// 模拟批次数据
const examBatches = ref([
  {
    id: 1,
    name: '2023年A级监考报名',
    required: 22,
    assigned: 0,
    signupStart: '2023-10-18T16:57:35',
    signupEnd: '2023-12-18T16:57:35',
    createdAt: '2023-10-17T16:57:35',
    status: '已结束'
  },
  {
    id: 2,
    name: '2023年B级监考报名',
    required: 30,
    assigned: 15,
    signupStart: '2023-11-01T09:00:00',
    signupEnd: '2023-12-15T17:00:00',
    createdAt: '2023-10-20T14:30:00',
    status: '进行中'
  },
  {
    id: 3,
    name: '2024年研究生入学考试监考',
    required: 50,
    assigned: 42,
    signupStart: '2024-01-10T08:00:00',
    signupEnd: '2024-02-28T18:00:00',
    createdAt: '2023-12-01T10:15:00',
    status: '进行中'
  }
]);

// 过滤批次数据
const filteredBatches = computed(() => {
  if (!searchKeyword.value) return examBatches.value;
  const keyword = searchKeyword.value.toLowerCase();
  return examBatches.value.filter(batch =>
      batch.name.toLowerCase().includes(keyword)
  );
});

// 格式化日期时间
const formatDateTime = (dateString: string) => {
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).replace(/\//g, '/');
};

// 状态样式
const statusClass = (status: string) => {
  return {
    'status-ended': status === '已结束',
    'status-ongoing': status === '进行中',
    'status-pending': status === '未开始'
  };
};

// 搜索
const search = () => {
  console.log('搜索关键词:', searchKeyword.value);
};

// 重置搜索
const resetSearch = () => {
  searchKeyword.value = '';
};

// 查看详情
const viewDetails = (batchId: number) => {
  router.push({ name: 'ExamDetailList', params: { id: batchId } });
};

// 下载监考表
const downloadExamSheet = (batchId: number) => {
  console.log('下载监考表', batchId);
  alert(`开始下载批次 ${batchId} 的监考表`);
};

// 前往创建批次
const goToCreateBatch = () => {
  router.push({ name: 'CreateExamBatch' });
};
</script>

<style scoped>
.exam-schedule {
  background-color: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
}

.header h1 {
  margin: 0;
  font-size: 20px;
  color: #1a2b4b;
}

.create-btn {
  padding: 8px 20px;
  background-color: #1a3a6c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.create-btn:hover {
  background-color: #0d2a56;
}

.search-bar {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  font-size: 14px;
}

.search-btn, .reset-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn {
  background-color: #1a3a6c;
  color: white;
}

.search-btn:hover {
  background-color: #0d2a56;
}

.reset-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
}

.reset-btn:hover {
  background-color: #e2e8f0;
}

.table-container {
  overflow-x: auto;
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.schedule-table th,
.schedule-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e8e8e8;
}

.schedule-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #1a2b4b;
}

.schedule-table tr:hover {
  background-color: #f8fafc;
}

.status-ended {
  color: #f5222d;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #fff1f0;
}

.status-ongoing {
  color: #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #e6f7ff;
}

.status-pending {
  color: #faad14;
  padding: 4px 8px;
  border-radius: 4px;
  background-color: #fffbe6;
}

.view-btn, .download-btn {
  padding: 6px 12px;
  font-size: 13px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 8px;
}

.view-btn {
  background-color: #1a3a6c;
  color: white;
}

.view-btn:hover {
  background-color: #0d2a56;
}

.download-btn {
  background-color: #f0f2f5;
  color: #1a2b4b;
}

.download-btn:hover {
  background-color: #e2e8f0;
}
</style>